@@include('./_header.html', {
"index": true,
"title": "QMUI Web - 一个旨在提高 UI 开发效率，快速产生项目 UI 的前端框架",
"currentPage": "index"
})

<div class="index_banner">
    <div class="dm_icon dm_icon_BannerLogo"></div>
    <div class="dm_icon dm_icon_BannerMobileLogo"></div>
    <div class="index_banner_desc">一个旨在提高 UI 开发效率<br/>快速产生项目 UI 的前端框架</div>
    <a class="index_banner_githubBtn" href="https://github.com/Tencent/QMUI_Web" target="_blank">GitHub</a><a
    class="index_banner_startBtn" href="./start.html">开始使用</a>
    <div>
        <a class="index_banner_updateBtn" href="./start.html#qui_upgrade" style="margin-bottom: 0;">全新 3.0 版本</a>
    </div>
    <!-- <div class="index_banner_version">当前版本 v2.0.0</div> -->
</div>

<div class="index_cnt">

    <div class="index_cnt_inside">

        <div class="index_cnt_purpose index_column">
            <div class="index_column_title">快速产生项目 UI</div>
            <div class="index_column_desc">
                QMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。<br/>框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以很轻松地提高
                Web UI 开发的效率，同时保持了项目的高可维护性与稳健。<br/>如果你需要方便地控制项目的整体样式，或者需要应对频繁的界面变动，<br/>那么 QMUI Web 框架将会是你最好的解决方案。
            </div>
            <div class="index_column_mobileDesc">
                <p>QMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。</p>
                <p>框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。</p>
                <p>如果你需要方便地控制项目的整体样式，或者需要应对频繁的界面变动，那么 QMUI Web 框架将会是你最好的解决方案。</p>
            </div>
        </div>

        <div class="index_cnt_ability index_column">

            <div class="index_cnt_ability_list">

                <div class="index_ability_item">
                    <div class="dm_icon dm_icon_Component"></div>
                    <div class="index_ability_item_title">基础配置与组件</div>
                    <div class="index_ability_item_cnt">通过内置的公共组件和对应的 Sass 配置表，你只需修改简单的配置即可快速实现所需样式的组件。<br/>（<a
                        href="https://github.com/Tencent/QMUI_Web/wiki/Q&A#qmui-sass-%E9%85%8D%E7%BD%AE%E8%A1%A8%E5%92%8C%E5%85%AC%E5%85%B1%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E5%B8%AE%E5%BF%99%E5%BC%80%E5%8F%91%E8%80%85%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80-ui">QMUI Sass 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI？）</a></div>
                </div>

                <div class="index_ability_item index_ability_item_Even">
                    <div class="dm_icon dm_icon_Sass"></div>
                    <div class="index_ability_item_title">Sass 增强支持</div>
                    <div class="index_ability_item_cnt">QMUI Web 包含多个 Sass mixin / function / extend，<br/>涉及布局、外观、设备适配、数值计算以及 Sass 原生能力增强等多个方面，可以帮助开发者大幅度提升开发效率。
                    </div>
                </div>

                <div class="index_ability_item">
                    <div class="dm_icon dm_icon_Workflow"></div>
                    <div class="index_ability_item_title">完善的内置工作流</div>
                    <div class="index_ability_item_cnt">QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎，样式优化，雪碧图处理，图片自动压缩，静态资源合并、压缩与变更等功能。
                    </div>

                </div>

                <div class="index_ability_item index_ability_item_Even">
                    <div class="dm_icon dm_icon_Extension"></div>
                    <div class="index_ability_item_title">扩展组件</div>
                    <div class="index_ability_item_cnt">QMUI Web 除了内置的公共组件外，还通过扩展的方式提供了常用的扩展组件，如等高左右双栏，文件上传按钮，树状选择菜单。
                    </div>
                </div>

            </div>

        </div>

        <div class="index_appIntro index_column">
            <div class="index_appIntro_title index_column_title">QMUI Web Desktop</div>
            <div class="index_appIntro_desc index_column_desc">QMUI Web Desktop 是一款基于 QMUI Web 的桌面 App，包含 macOS 和 Windows 两个版本。它可以管理基于 QMUI Web 进行开发的项目，通过 GUI 界面处理 QMUI Web 的服务开启/关闭，使框架的使用变得更加便捷，并提供了编译提醒，出错提醒，进程关闭提醒等额外的功能。
            </div>
            <div class="index_appIntro_img"></div>
            <a class="index_downloadBtn" href="https://github.com/Tencent/QMUI_Web_Desktop/releases" target="_blank">从
                Github 下载</a>
            <div class="index_appIntro_downloadDirect" id="downloadDirect">高速分流下载 <a
                href="http://cdn.qmuiteam.com/download/web/latest.php?platform=mac" target="_blank">macOS</a> / <a
                href="http://cdn.qmuiteam.com/download/web/latest.php?platform=win" target="_blank">Windows</a></div>
        </div>

        <div class="index_project index_column">
            <div class="index_project_desc">该框架已支持以下项目：</div>
            <div class="index_project_list">
                <a class="dm_icon dm_icon_QQMailLogo index_project_list_item" href="http://mail.qq.com/"
                   target="_blank">QQ 邮箱</a>
                <a class="dm_icon dm_icon_WeWorkLogo index_project_list_item" href="https://work.weixin.qq.com/"
                   target="_blank">企业微信</a>
                <a class="dm_icon dm_icon_WeReadLogo index_project_list_item" href="http://weread.qq.com/"
                   target="_blank">微信读书</a>
            </div>
        </div>

    </div>
</div>

<div class="index_foot">
    <span class="dm_icon dm_icon_BottomLogo"></span>
    <div>♥ Developed by <a class="qui_txtBold" href="http://qmuiteam.com/" target="_blank">QMUI Team</a>
    </div>
</div>

@@include('./_footer.html')
